<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script src="../lib/vue2.js"></script>
  </head>
  <body>
    <div id="box">
      <!-- 当我们想动态改变组件的内容时可以使用slot插槽 -->
      <com-one>
        <div>111</div>
        <div>222</div>
      </com-one>

      <com-two>
        <div slot="a">111</div>
        <div>222</div>
        <div slot="a">333</div>
      </com-two>

      <!-- 新版v-slot指令写法 -->
      <com-two>
        <template>
          <div>111</div>
          <div>111</div>
        </template>
        <!-- 可以简写为# -->
        <!-- <template v-slot:a> -->
        <template #a>
          <div>222</div>
        </template>
      </com-two>
    </div>

    <script>
      // 新建组件
      Vue.component("comOne", {
        // 当只有一个slot时，组件中内容会全部放入此插槽
        template: ` <div>
            <p>插槽</p>
              <slot></slot>
               </div>`,
      });

      Vue.component("comTwo", {
        // 当多个slot时，根据命名插入内容，未命名的插槽插入所有未命名内容
        template: ` <div>
            <p>插槽</p>
              <slot name="a"></slot>
              <slot></slot>
               </div>`,
      });
      new Vue({
        el: "#box",
      });
    </script>
  </body>
</html>
